﻿@using Telerik.Web.Mvc.UI
@{    
    ViewBag.Title = T("Admin.Catalog.Attributes.SpecificationAttributes").Text;
}

@using (Html.BeginForm())
{
	<div class="section-header">
		<div class="title">
			@T("Admin.Catalog.Attributes.SpecificationAttributes")
		</div>
		<div class="options">
			<a href="@Url.Action("Create")" class="btn btn-primary">
				<i class="fa fa-plus"></i>
				<span>@T("Admin.Common.AddNew")</span>
			</a>
			<button type="submit" id="delete-selected" name="delete-selected" value="delete_selected" class="btn btn-danger">
				<i class="far fa-trash-alt"></i>
				<span>@T("Admin.Common.DeleteSelected")</span>
			</button>
		</div>
	</div>
	<div>
		@(Html.Telerik().Grid<SpecificationAttributeModel>()
				.Name("specificationattributes-grid")
				.ClientEvents(events => events.OnDataBound("onDataBound"))
				.Columns(columns =>
				{
					columns.Bound(x => x.Id)
						.ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= Id #>' class='checkboxGroups'/>")
						.Title("<input id='mastercheckbox' type='checkbox'/>")
						.Width(50)
						.Filterable(false)
						.HtmlAttributes(new { style = "text-align:center" })
						.HeaderHtmlAttributes(new { style = "text-align:center" });
					columns.Bound(x => x.Name)
						.ClientTemplate("<a href='Edit/<#= Id #>'><#= Name #></a>");
					columns.Bound(x => x.Alias);
					columns.Bound(x => x.OptionCount)
						.Filterable(false)
						.Width(200)
						.Centered();
					columns.Bound(x => x.AllowFiltering)
						.Filterable(false)
						.Width(200)
						.Centered()
						.ClientTemplate(@Html.SymbolForBool("AllowFiltering"));
					columns.Bound(x => x.ShowOnProductPage)
						.Filterable(false)
						.Width(240)
						.Centered()
						.ClientTemplate(@Html.SymbolForBool("ShowOnProductPage"));
					columns.Bound(x => x.DisplayOrder)
						.Filterable(false)
						.Width(200)
						.Centered();
				})
				.Filterable()
				.Pageable(settings => settings.PageSize((int)ViewData["GridPageSize"]).Position(GridPagerPosition.Both))
				.DataBinding(dataBinding => dataBinding.Ajax().Select("List", "SpecificationAttribute"))
				.PreserveGridState()
				.EnableCustomBinding(true))
	</div>
}

<script type="text/javascript">
	var selectedIds = [];

	$(document).ready(function () {
		// "delete selected" button
		$('#delete-selected').click(function (e) {
			e.preventDefault();

			var postData = { selectedIds: selectedIds };

			$.ajax({
				cache: false,
				type: "POST",
				url: "@(Url.Action("DeleteSelected", "SpecificationAttribute"))",
				data: postData,
				complete: function (data) {
					var grid = $('#specificationattributes-grid').data('tGrid');
					grid.currentPage = 1;
					grid.ajaxRequest();

					//clear selected checkboxes
					$('.checkboxGroups').attr('checked', false).change();
					selectedIds = [];
				},
				error: function (xhr, ajaxOptions, thrownError) {
					alert(thrownError);
				},
				traditional: true
			});
			return false;
		});

		$('#mastercheckbox').click(function () {
			$('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
		});

		// wire up checkboxes
		$(document).on('change', '#specificationattributes-grid input[type=checkbox][id!=mastercheckbox]', function (e) {
			var $check = $(this);
			if ($check.is(":checked") == true) {
				var checked = jQuery.inArray($check.val(), selectedIds);
				if (checked == -1) {
					// add id to selectedIds
					selectedIds.push($check.val());
				}
			}
			else {
				var checked = jQuery.inArray($check.val(), selectedIds);
				if (checked > -1) {
					// remove id from selectedIds
					selectedIds = $.grep(selectedIds, function (item, index) {
						return item != $check.val();
					});
				}
			}
			updateMasterCheckbox();
		});
	});

	function onDataBound(e) {
		$('#specificationattributes-grid input[type=checkbox][id!=mastercheckbox]').each(function () {
			var currentId = $(this).val();
			var checked = jQuery.inArray(currentId, selectedIds);
			// set checked based on if current checkbox's value is in selectedIds
			$(this).attr('checked', checked > -1);
		});

		updateMasterCheckbox();
	}

	function updateMasterCheckbox() {
		var numChkBoxes = $('#specificationattributes-grid input[type=checkbox][id!=mastercheckbox]').length;
		var numChkBoxesChecked = $('#specificationattributes-grid input[type=checkbox][checked][id!=mastercheckbox]').length;
		$('#specificationattributes-grid').attr('checked', numChkBoxes == numChkBoxesChecked && numChkBoxes > 0);
	}
</script>